<template>
  <!--未挂载案场设备-->
  <el-row style="height:100%">
    <page>
      <pageheader :isShow="false">
        未挂载案场设备
      </pageheader>
      <div class="page-content">
        <el-card class="box-card tag-card">
          <el-row>
            <span>搜索：</span>
            <el-input v-model="keywords" size="small" clearable placeholder="请输入关键字" style="width:300px;">
              <el-button @click="deviceSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <span style="margin-left: 20px">是否在线：</span>
            <el-select v-model="ruleForm.isOnline" @change="isOnlineChange"
                       size="small" style="width:200px">
              <el-option label="全部" value=''></el-option>
              <el-option label="在线" value=1></el-option>
              <el-option label="离线" value=0></el-option>
            </el-select>
          </el-row>
          <el-table :data="dataTable" size="small" stripe>
            <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60" fixed="left"></el-table-column>
            <el-table-column prop="case_info_name" label="案场名称" align="center" width="100" fixed="left">
              <template slot-scope="scope">
                {{scope.row.is_bind_case == 1?scope.row.case_info_name:''}}
                <el-tag v-if="scope.row.is_bind_case != 1" size="mini" type="warning">未挂载</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="设备编号" prop="device_code" align="center" width="100" fixed="left"></el-table-column>
            <el-table-column label="设备品牌" prop="brand" align="center"></el-table-column>
            <el-table-column label="设备型号" prop="model_number" align="center"></el-table-column>
            <el-table-column label="设备IP" prop="device_ip" align="center" width="120px">
              <template slot-scope="scope">
                <a :href="'http://'+scope.row.device_ip" target="_blank">{{scope.row.device_ip}}</a>
              </template>
            </el-table-column>
            <el-table-column label="设备流水号" prop="device_sn" align="center"></el-table-column>
            <el-table-column label="照射区域编号" prop="zone_code" align="center" width="140">
              <template slot-scope="scope">
                <span v-if="scope.row.zone_code_arr.length == 1">{{scope.row.zone_code_arr[0]}}</span>
                <el-popover v-if="scope.row.zone_code_arr.length > 1"
                            placement="right"
                            trigger="click"
                            class="popover">
                  <ul class="popover-ul">
                    <li style="padding-left: 0;font-weight: bold">照射区域编号：</li>
                    <li v-for="(item,index) in scope.row.zone_code_arr">{{index+1}}： {{item}}</li>
                  </ul>
                  <el-button style="width: 120px;overflow: hidden;text-overflow:ellipsis;" size="small" slot="reference" :title="scope.row.zone_code_arr[0]">
                    <span style="font-size: 14px;margin-right: 5px">{{scope.row.zone_code_arr.length}}:</span>{{scope.row.zone_code_arr[0]}}
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="照射区域ID" prop="zone_sn" align="center" width="90">
              <template slot-scope="scope">
                <span v-if="scope.row.zone_sn_arr.length == 1">{{scope.row.zone_sn_arr[0]}}</span>
                <el-popover v-if="scope.row.zone_sn_arr.length > 1"
                            placement="right"
                            trigger="click"
                            class="popover">
                  <ul class="popover-ul">
                    <li style="padding-left: 0;font-weight: bold">照射区域编号：</li>
                    <li v-for="(item,index) in scope.row.zone_sn_arr">{{index+1}}： {{item}}</li>
                  </ul>
                  <el-button style="width:80px;overflow: hidden;text-overflow:ellipsis;" size="small" slot="reference" :title="scope.row.zone_sn_arr[0]">
                    <span style="font-size: 14px;margin-right: 5px">{{scope.row.zone_sn_arr.length}}:</span>{{scope.row.zone_sn_arr[0]}}
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="设备在线状态" prop="is_online" align="center" width="100px" fixed="right">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_online == 1" size="mini" type="success">在线</el-tag>
                <el-tag v-else size="mini" type="danger">离线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="最后数据时间" prop="last_data_time" align="center" fixed="right"></el-table-column>
            <el-table-column label="最后活跃时间" prop="last_active_time" align="center" fixed="right"></el-table-column>
            <el-table-column label="分身状态" prop="has_cloned" align="center" fixed="right">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.has_cloned == 0" size="small" type="info">无分身</el-tag>
                <el-tag v-else-if="scope.row.has_cloned == 1" size="small">主体</el-tag>
                <el-tag v-else size="small" type="success">分身</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200" v-if="buttonPermissions.isDelete" fixed="right">
              <template slot-scope="scope">
                <el-button v-if="scope.row.has_cloned != 2 && buttonPermissions.isCloned"
                           @click="makeCloned(scope.row)"  size="mini" >制作分身</el-button>
                <el-button type="danger" v-if="buttonPermissions.isDelete"
                           @click="deleteDevice(scope.row)" size="small" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background
                         layout="total,sizes,prev,pager,next"
                         @current-change="currentChange"
                         @size-change="sizeChange"
                         :page-sizes="pagination.pageSizes"
                         :page-size.sync="pagination.pageSize"
                         :total="pagination.total"
                         :current-page.sync="pagination.currentPage"
                         class="paging fr">
          </el-pagination>
        </el-card>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  .page-content {
    .tag-card{
      >.el-card__body{
        >.el-row{
          margin-bottom: 12px;
        }
      }
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .tag-search{
      width: 40%;
      display: inline-block;
    }
    .tag-search .search-input{
      width: 300px;
      display: inline-block;
    }
    .tag-search .tag-name{
      font-size: 14px;
    }

  }

  body{
    .el-message-box__wrapper{
      .shanchuClass{
        .el-message-box__content{
          .el-message-box__message{
            p{
              max-height: 200px;
              overflow-y: auto;
              width: 100%;
              word-break:break-all;
            }
          }
        }
      }
    }
  }
  .popover{
    display: block;
    .databtn{
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis
    }
  }
  .popover-ul{
    max-height: 500px;
    overflow: auto;
    li{
      display: block;
      padding: 10px 20px
    }
  }

</style>
<script>
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  import TreeTable from "@/components/common/treeTable";
  import Cascader from "@/components/sys/assembly/elcascader";
  export default {
    data() {
      return {
        pageTitle: "未挂载案场设备",
        ruleForm:{
          isOnline:'',//在线状态
        },
        dataTable:[],
        keywords:'',
        pagination:{
          total:0,//总条目数
          currentPage:1,//当前页数
          pageSize:10,//每页显示条目个数
          pageSizes:[10,20,50,100],//每页显示个数选择器的选项设置
        },//表格分页参数
        lastSortField:'',//上一次排序字段
        lastAscOrDesc:0,//上一次正序还是倒序
        buttonPermissions:{
          isDelete:false,
          isCloned:false
        },
      }
    },
    inject: ["reload"],
    components: {
      page,
      pageheader,
      Cascader,//级联选择器组件
    },
    created() {
      this.getDevice();
      if (sessionStorage.buttonPermissions) {
        this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
      }
    },
    mounted() {},
    beforeDestroy(){
      this.$Bus.$off('companyChange')
    },
    methods: {
      //配置按钮权限，根据权限不同调整表头渲染参数
      configPermissions(val){
        let buttonPermissions = val
        let menuButtonPermissions = [];//按钮权限数组
        buttonPermissions.forEach(e =>{
          for(let key in e){
            if(key == 'menu_code'){
              menuButtonPermissions.push(e[key])
            }
          }
        });
        this.buttonPermissions.isDelete = menuButtonPermissions.includes('isNotMountDelete') ? true : false;//删除
        this.buttonPermissions.isCloned = menuButtonPermissions.includes('isNotMountCloned') ? true : false;//制作分身
      },
      //表格序号显示方法
      indexMethod(index){
        return index + ((this.pagination.currentPage - 1) * this.pagination.pageSize) + 1
      },

      getDevice(keywords = '',page='1',page_size='10'){
        this.$Bus.$emit('Loading',true);
        let url = '/sys/device_zone/search_device_not_case?keywords='+ encodeURIComponent(keywords) + '&page='+ page + '&page_size=' + page_size +
          '&search_type=2&is_online='+ this.ruleForm.isOnline
        this.$api.post(url,{})
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          //判断接口返回正常
          if(data.data){
            let _data = data.data
            console.log(_data);
            _data.dataList = _data.dataList ? _data.dataList.map(x=>{
              if(x.last_data_time){
                x.last_data_time = String(x.last_data_time)
                x.last_data_time = x.last_data_time.substring(0,4) + '-' + x.last_data_time.substring(4,6) + '-' +
                  x.last_data_time.substring(6,8) + ' '+ x.last_data_time.substring(8,10) + ':' +  x.last_data_time.substring(10,12) + ':' + x.last_data_time.substring(12,14)
              }
              if(x.last_active_time){
                x.last_active_time = String(x.last_active_time)
                x.last_active_time = x.last_active_time.substring(0,4) + '-' + x.last_active_time.substring(4,6) + '-' +
                  x.last_active_time.substring(6,8) + ' '+ x.last_active_time.substring(8,10) + ':' +  x.last_active_time.substring(10,12) + ':' + x.last_active_time.substring(12,14)
              }
              x.area_name_arr = x.area_name ? x.area_name.split(',') : []
              x.zone_code_arr = x.zone_code ? x.zone_code.split(',') : []
              x.zone_sn_arr = x.zone_sn ? x.zone_sn.split(',') : []
              return x
            }) : []
            this.dataTable =  _data.dataList
            this.pagination.total = _data.dataCount;
            this.pagination.currentPage = _data.pageCode;
            this.pagination.pageSize = _data.pageSize;
          }
          this.$Bus.$emit('Loading',false)
        })
        .catch(err=>{
           console.log(err);
          this.dataTable = []
          this.$Bus.$emit('Loading',false)
        })
      },
      //每页显示条目个数change事件
      sizeChange(val){
        this.$Bus.$emit('Loading',true)
        this.getDevice(this.keywords,this.pagination.currentPage,val)
      },
      //分页change事件
      currentChange(val){
        this.$Bus.$emit('Loading',true)
        this.getDevice(this.keywords,val,this.pagination.pageSize)
      },
      //搜索按钮点击事件
      deviceSearch() {
        this.$Bus.$emit('Loading',true)
        this.pagination.currentPage = 1
        this.getDevice(this.keywords,this.pagination.currentPage,this.pagination.pageSize)
      },
      //是否在线change
      isOnlineChange(){
        this.getDevice(this.keywords,'',this.pagination.pageSize)
      },
      //删除
      deleteDevice(data){
        this.$confirm("是否删除设备‘"+ data.device_code+'-'+data.device_sn +"’？", "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center:true
        })
        .then(() => {
          this.$Bus.$emit('Loading',true)
          this.delData(data.id,0);
        })
        .catch(() => {
          return
        });
      },
      delData(id,isDelete){
        let url='/sys/device_zone/delete_device?device_id='+id+'&del_type='+isDelete;
        this.$api.delete(url)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data.data.del_success==1)
          {
            this.$Bus.$emit('Loading',true);
            this.getDevice(this.keywords,this.pagination.currentPage,this.pagination.pageSize)
            this.$message({
              message: "删除成功",
              type: "success"
            });
          }
          else{
            let nameArr=[];
            for(let i in data.data.area_list )
            {
              nameArr.push(data.data.area_list[i].area_name );
            }
            this.$Bus.$emit('Loading',false);
            this.$confirm(nameArr.join(' , ') , '删除该设备会影响到以下区域，是否删除？', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              customClass:'shanchuClass',
              type: 'warning'
            }).then(() => {
              this.delData(id,1);
            }).catch(() => {});
          }
        })
        .catch(err=>{
          this.$message.error('删除失败');
          this.$Bus.$emit('Loading',false);
          console.log('错误');
        })
      },
      //制作分身
      makeCloned(data){
        this.$confirm("是否对‘"+ data.device_code+'-'+data.device_sn +"’设备制作分身？", "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center:true
        })
        .then(() => {
          this.$Bus.$emit('Loading',true)
          let url = 'sys/device_zone/make_cloned?device_id='+ data.id
          this.$api.post(url)
          .then(data=>{
            if(data == '10001'){
              this.$message.error('无权操作该数据')
              this.$Bus.$emit('Loading',false);
              return
            }
            console.log(data);
            if(data.msg ==='success'){
              this.$message.success('分身制作成功，新建分身请到"未挂载案场设备"页面中查看！')
              this.$Bus.$emit('Loading',true)
              this.getDevice(this.keywords,this.pagination.currentPage,this.pagination.pageSize)
            }else{
              this.$Bus.$emit('Loading',false)
            }
          })
          .catch(err=>{
            console.log(err);
            this.$Bus.$emit('Loading',false)
          })
        })
        .catch(() => {
          return
        });
      },
      SeachSortChange(column, prop, order ){
        let sortField = column.prop
        if(this.lastSortField == column.prop && this.lastAscOrDesc == 0){
          this.lastAscOrDesc = 1
        }else if(this.lastSortField == column.prop && this.lastAscOrDesc == 1){
          this.lastSortField = ''
          this.lastAscOrDesc = 0
        }else{
          this.lastSortField = sortField
          this.lastAscOrDesc = 0
        }
        this.pagination.currentPage = 1
        this.getDevice(this.keywords,this.pagination.currentPage,this.pagination.pageSize)
      },
    },
    watch: {}
  }
</script>
